function enlarge(){
  $('.small img').click(function(){
      $(this).addClass('active').siblings().removeClass('active')
      $('.big img').attr('src', $(this).attr('src') )
      $('.zhong>img').attr('src', $(this).attr('src') )
  })
  
  $('.box').hover(function(){
      $('.mask').show()
      $('.big').show()
      $('.box').mousemove(e=>{
          var x = e.pageX;
          var y = e.pageY;
          var left = x - $('.mask').width()/2
          var top = y - $('.mask').height()/2;
          if(left<$('.box').offset().left) left=$('.box').offset().left
          if(top<$('.box').offset().top) top=$('.box').offset().top
          if(left>$('.box').width()-$('.mask').width()+$('.box').offset().left) left=$('.box').width()-$('.mask').width()+$('.box').offset().left
          if(top>$('.box').height()-$('.mask').height()+$('.box').offset().top) top=$('.box').height()-$('.mask').height()+$('.box').offset().top
          $('.mask').offset({left,top})
  
          var bigLeft = (left - $('.box').offset().left) / $('.box').width() * $('.big img').width()
          var bigTop = (top - $('.box').offset().top) / $('.box').height() * $('.big img').height()
          $('.big img').css({
              left:-bigLeft + "px",
              top:-bigTop+"px"
          })
      })
  },function(){
      $('.mask').hide()
      $('.big').hide()
  })
}